import React from "react";
import { Form, Input, Button, message as antdMessage } from "antd";
import axios from "axios";
import { NavLink, useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate()
  const onFinish = async (values) => {
    const resp = await axios.post("/api/login", values);
    const { code,  message, data } = resp.data
    if(code === 10000) {
      antdMessage.success(message);
      localStorage.setItem('userInfo', JSON.stringify(data));
      navigate('/')
    } else {
      antdMessage.error(message)
    }
  };
  return (
    <div>
      <div
        style={{
          width: 400,
          margin: "200px auto",
          border: "1px solid #ccc",
          padding: 20,
          borderRadius: 10,
        }}
      >
        <h2 style={{ textAlign: "center" }}>用户登录</h2>
        <Form onFinish={onFinish}>
          <Form.Item name="username" label="账户">
            <Input placeholder="请输入账号"></Input>
          </Form.Item>
          <Form.Item name="password" label="密码">
            <Input.Password placeholder="请输入密码"></Input.Password>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
        <h5>
          <NavLink to="/register">还没有账号？ 点我去注册吧！</NavLink>
        </h5>
      </div>
    </div>
  );
};

export default Login;
